<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<html>
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>회원가입</title>

<link href="http://fonts.googleapis.com/css?family=Arvo"
	rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Bevan"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />

</head>
<script type="text/javascript" src="../js/httpRequest.js"></script>
<script type="text/javascript">
	var idCheck = 0;
	var aliasCheck = 0;
	var addrCheck =0;
	

	//공백제거
	function trimSpace(str) {
		var len = str.length;
		for ( var i = 0; i < len; i++) {
			if (str.charAt(i) == " ")
				return 0;
			else
				continue;
		}
		return 1;
	}

	//아이디중복검색버튼
	function id_Check() {
		idCheck = 0;
		var id = document.getElementById("m_id").value;
		var specialChars1 = 'abcdefghijklmnopqrstuvwxyz0123456789';
		var i, j;
		var strId = "";
		
		
		
		//아이디 입력하지 않은경우
		if (id == "") {
			alert("아이디를 입력해주세요~!");
			join.m_id.focus();
			return ;
		}
		
		//아이디 공백
		if (trimSpace(id) == 0 ) {
			alert("공백은 사용할수 없습니다~!");
			join.m_id.value = "";
			join.m_id.focus();
			return 0;
		}
		

		//아이디 적합확인
		for (i = 0; i < id.length; i++) {
			for (j = 0; j < specialChars1.length; j++) {
				if (id.charAt(i) == specialChars1.charAt(j)) {
					strId += id.charAt(i);
				}
			}
		}

		//적합하지 않은경우
		if (strId != id) {
			alert("아이디는 소문자와 숫자만 사용할수 있습니다.");
			join.m_id.value = "";
			join.m_id.focus();
			return;
		}

		//적합한 경우
		else
			sendRequest("../ajax/id_check.jsp", "m_id=" + id, id_CheckResult,"POST");
	}
	
	

	//아이디중복검색결과
	function id_CheckResult() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			var id = eval(xhr.responseText);
			//alert(id[0].result);
			if (id[0].result == "success") {
				alert("사용가능한 아이디입니다.");
				idCheck = 1;
			} else {
				alert("이미 사용중인 아이디입니다.");
				join.m_id.value = "";
				join.m_id.focus;
			}
		}
	}

	//////////////////////////////////////////////////////////////////////////////////
	
	//별명중복검색
	function alias_Check() {
		aliasCheck=0;
		var alias = document.getElementById("m_alias").value;

		var specialChars = '~`!@#$%%^&*-=+\|[{]};:\',<.>/?';
		var i, j;

		for (i = 0; i < alias.length; i++) {
			for (j = 0; j < specialChars.length; j++) {
				if (alias.charAt(i) == specialChars.charAt(j)) {
					alert("특수문자는 사용할수 없습니다.");
					join.m_alias.focus();
					return 0;
				}
			}
		}

		if (trimSpace(alias) == 0) {
			alert("공백을 사용할수 없습니다.");
			join.m_alias.value = "";
			join.m_alias.focus;
			return 0;
		}

		if (alias == "") {
			alert("별명을 입력해주세요~!");
			join.m_alias.focus;
			return 0;
		}

		else {
			sendRequest("../ajax/alias_check.jsp", "m_alias=" + alias,
					alias_CheckResult, "POST");
		}
	}

	//별명중복검색결과
	function alias_CheckResult() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			var alias = eval(xhr.responseText);
			if (alias[0].result == "success") {
				aliasCheck = 1;
				alert("사용가능한 별명입니다.");
			} else {
				alert("사용불가능한 별명입니다.");
			}
		}
	}

	//주소검색
	function searchAddr() {
		window.open("../member/searchaddr.jsp", "우편번호검색",
				"width=600 ,height=350, scrollbars=yes");
		alert(join.m_addr1.value);
		addrCheck = 1;
	}
	
	

	//form 확인~
	function check_saveform() {
		
		

		if (join.m_name.value == "") {
			alert("이름이 입력되지 않았습니다.");
			m_join.name.focus();
			return;
		}

		if (join.m_birth_y.value == "" 
				|| join.m_birth_m.value == ""
				|| join.m_birth_d.value == "") {
			alert("생년월일을 확인해주세요!");
			join.m_birth_y.focus();
			return;
		}

		if (idCheck == 0) {
			alert("아이디중복확인을 해주세요");
			return;
		}

		if (join.m_pwd.value != join.m_repwd.value) {
			alert("비밀번호가 일치 하지 않습니다.");
			join.m_pwd.focus();
			return;
		}
		if (join.m_pwd_hint.value == "") {
			alert("비밀번호찾기/힌트를 입력해주세요");
			join.m_pwd_hint.focus();
			return;
		}
		if (join.m_pwd_answer.value == "") {
			alert("비밀번호찾기/답을 입력해주세요");
			join.m_pwd_answer.focus();
			return;
		}

		if (addrCheck == 0) {
			alert("주소검색을 해주세요");
			return;
		}
		if (join.m_addr2.value == "") {
			alert("상세주소를 입력해주세요");
			join.m_addr2.focus();
			return;
		}
		if (join.phone1.value == "" || join.phone2.value == ""
				|| join.phone3.value == "") {
			alert("전화번호가 입력되지 않았습니다.");
			join.phone1.focus();
			return;
		}
		if (join.email1.value == "" || join.email2.value == "") {
			alert("메일이 입력되지 않았습니다.");
			document.join.email1.focus();
			return;
		}

		//이메일 
		var email1 = join.email1.value;
		var email2 = join.email2.value;
		var m_mail = email1 + "@" + email2;

		//전화번호
		var phone1 = join.phone1.value;
		var phone2 = join.phone2.value;
		var phone3 = join.phone3.value;
		var m_phone = phone1 + "." + phone2 + "." + phone3;

		join.action = "../member/member_join.do?m_mail=" + m_mail + "&m_hp="
				+ m_phone + "&menu_no=2&state=list";

		join.submit();

	}

	

	//비번힌트 확인
	function check(value) {

		//직접입력일경우
		if (value == "in") {
			var td = document.getElementById("td_sel");
			var cnt = td.childNodes.length;
			for ( var i = 0; i < cnt; i++)
				td.removeChild(td.childNodes[0]);

			var u_input = document.createElement("input");
			u_input.setAttribute("type", "text");
			u_input.setAttribute("name", "m_pwd_hint");
			u_input.setAttribute("size", "20");

			td.appendChild(u_input);
			join.m_pwd_hint.focus();
			
		}
	}

</script>



<body>
	<div>
		<form name="join" method="post">
			<table width="650" align="center" border="0">
				<tr>
					<td colspan="2" align="center"><h1><strong>가입신청서</strong></h1></td>
				</tr>
			</table>

			<br>
			<br>
			<table width="650" align="center" border="1" cellpadding="0" cellspacing="0" >
				<tr>
					<td class="inform1">이&nbsp;&nbsp;&nbsp;&nbsp;름</td>
					<td class="inform2"><input type="text" name="m_name" maxlength="20" size="20" required></td>
				</tr>

				<tr>
					<td class="inform1">아&nbsp;&nbsp;이&nbsp;&nbsp;디</td>
					<td class="inform2">
						<input type="text" name="m_id"id="m_id" maxlength="20" size="20">
						<input type="button" value="아이디중복확인" onClick="id_Check()"></td>
				</tr>

				<tr>
					<td class="inform1">비밀번호</td>
					<td class="inform2"><input type="password" name="m_pwd" maxlength="20" size="23"></td>
				</tr>

				<tr>
					<td class="inform1" >비밀번호확인</td>
					<td class="inform2"><input type="password" name="m_repwd" maxlength="20" size="23"></td>
				</tr>

				<tr>
					<td class="inform1" >비밀번호찾기/힌트</td>
					<td class="inform2" id="td_sel">
					<select name="m_pwd_hint" onchange="check(this.value)">
							<option value="">비밀번호 힌트 입력하기</option>
							<option value="">비밀번호 힌트 입력하기</option>
							<option value="">비밀번호 힌트 입력하기</option>
							<option value="in">직접입력</option>
					</select></td>
				</tr>

				<tr>
					<td class="inform1" >비밀번호찾기/답</td>
					<td class="inform2"><input type="text" name="m_pwd_answer" maxlength="20" size="20"></td>
				</tr>

				<tr>
					<td class="inform1" >생년월일</td>
					<td class="inform2"><select name='m_birth_y'>
							<option selected value=''>선택</option>
							<c:forEach begin="1960" end="2002" step="1" var="year">
								<option value='${year}'>${year}</option>
							</c:forEach>
					</select>년 <select name='m_birth_m'>
							<option selected value=''>선택</option>
							<c:forEach begin="1" end="12" step="1" var="month">
								<option value='${month}'>${month}</option>
							</c:forEach>
					</select>월 <select name='m_birth_d'>
							<option selected value=''>선택</option>
							<c:forEach begin="1" end="31" step="1" var="day">
								<option value='${day}'>${day}</option>
							</c:forEach>
					</select>일&nbsp;&nbsp;
				</tr>




				<tr>
					<td class="inform1" >성&nbsp;&nbsp;&nbsp;&nbsp;별</td>
					<td class="inform2">남 <input type="radio"
						name="m_sex" value='남'>&nbsp; 여 <input type="radio"
						name="m_sex" value='여'></td>
				</tr>


				<tr>
					<td class="inform1" >이&nbsp;&nbsp;메&nbsp;&nbsp;일</td>
					<td class="inform2"><input type="text" name="email1"
						size="20"> @ <input type="text" name="email2" size="30"></td>
				</tr>

				<tr>
					<td class="inform1" >핸드폰번호</td>
					<td class="inform2"><select name="phone1">
							<option>010</option>
							<option>011</option>
							<option>016</option>
							<option>017</option>
							<option>018</option>
							<option>019</option>
					</select> - <input type="text" name="phone2" maxlength="4" size="4">
						- <input type="text" name="phone3" maxlength="4" size="4"></td>
				</tr>


				<tr>
					<td class="inform1" >별&nbsp;&nbsp;&nbsp;&nbsp;명</td>
					<td class="inform2"><input type="text" name="m_alias"
						id="m_alias" maxlength="20" size="20"> <input
						type="button" value="별명중복확인" onClick="alias_Check(this.form)"></td>
				</tr>


				<tr>
					<td class="inform1" >우편번호</td>
					<td class="inform2"><input type="text"
						name="m_zipcode" readonly="readonly" value='${zvo.zipcode}'
						maxlength="3" size="10"> <input type="button"
						value="주소 검색" onclick="searchAddr()"></td>
				</tr>

				<tr>
					<td class="inform1" >집&nbsp;&nbsp;주&nbsp;&nbsp;소</td>
					<td class="inform2"><input type="text" name="m_addr1"
						readonly="readonly" size="50"></td>
				</tr>

				<tr>
					<td class="inform1" >상세주소</td>
					<td class="inform2"><input type="text" name="m_addr2"
						size="50"></td>
				</tr>

				<tr>
					<td colspan=2 align=center height="50px">
					<input type="button" class="pink_m_button"
						onclick="check_saveform()" value="가입신청">&nbsp;&nbsp; 
						<input type="reset" class="pink_m_button" value="다시작성"></td>
				</tr>

			</table>
		</form>
	</div>
</body>
</html>